<template>
  <main>

    <div class="top">
      <img :src="userInfo.userImg">
    </div>

    <div class="mid">
      <h1>{{userInfo.userName}}</h1>
    </div>

    <div class="low">
      <h3>{{ userInfo.info }}</h3>
      <div style="display: flex;width: 100%;height: 50%;">
        <button class="low-bt" @click="toPage" style="margin-right: 5px">返回主页</button>
        <button class="low-bt" @click="outUser" style="margin-left: 5px">退出登录</button>
      </div>
    </div>
  </main>
</template>

<script setup>
import {onBeforeMount, onBeforeUnmount, reactive, ref} from 'vue';

import {useRouter} from "vue-router";
const router = useRouter();

import useUserInfoStore from "../stores/user.js";
import { storeToRefs } from "pinia";
const userInfoStore = useUserInfoStore();
const { accounts, userInfo} = storeToRefs(userInfoStore);

  const outUser = () => {
    let tmpF = confirm("确定要退出吗？？？");
    if (!tmpF)return ;
    userInfo.value.flag = false;
    userInfo.value.shopCars = [];
    sessionStorage.removeItem('piniaStore');
    router.push('/');
  }
  const toPage = () => {
    router.push("/");
  }
  // 生命周期钩子
  onBeforeMount(()=>{
    console.log("uin",'挂载之前');
    document.querySelector('body').setAttribute('style', 'background-color:#eeedf1');
  });
  onBeforeUnmount(()=>{
    console.log('卸载之前');
    document.querySelector('body').removeAttribute('style')
  });
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
main {
  width: 700px;
  height: 800px;
  justify-items: center;
  background-color: white;
  box-sizing: border-box;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.top {
  width: 80%;
  height: 50%;
  padding: 40px 0 40px 0;
}
.mid {
  width: 80%;
  height: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.low {
  width: 80%;
  height: 25%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
img {
  width: 100%;
  height: 100%;

}
.low-bt {
  width: 49%;
  height: 100%;
  margin-top: 20px;
  border: 0;
  background-color: #dad9d9;
  font-size: 20px;

}
.low-bt:hover {
  background-color: #b7b7b7;
}
.low-bt:focus {
  outline: none;
}
</style>